<template>
  <view class="flex justify-start items-center" @click="handleCheck()">
    <view
      class="flex justify-center flex-items-center wr-40 hr-40 b-rd-20 bdr-solid-#f5f5f5-2 bg-blue-1"
      :class="{ 'check-border': !checked }"
    >
      <image width="100%" height="100%" :src="checkImage" mode="scaleToFill" />
    </view>
    <view class="font-size-28">{{ label }}</view>
  </view>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'rodia',
})
const props = defineProps({
  checked: {
    type: Boolean,
    default: false,
  },
  label: {
    type: String,
    default: '',
  },
})
onMounted(() => {
  checkValue.value = props.checked
})
const emits = defineEmits(['checkChange'])
const checkValue = ref(true)
const handleCheck = () => {
  checkValue.value = !checkValue.value
  emits('checkChange', checkValue.value)
}
const checkImage = ref('../../static/images/components/check.png')
onLoad(() => {})
</script>

<style scoped lang="scss"></style>
